import React from 'react';
import './css/Shangjiaguanli.css'
import {  ReloadOutlined  , SearchOutlined,VerifiedOutlined ,CheckCircleOutlined ,CloseCircleOutlined ,WarningOutlined  } from '@ant-design/icons';
import {Button, Input, Table, Modal, Form, Space,Popconfirm, message} from 'antd';
import axios from 'axios'
import {SEARCH_MERCHANT} from '../../utils/api'
// 分页
const pageNum={
    pageSize:4
};
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
const onFinish = values => {
    console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
class Shangjiaguanli extends React.Component {
    handleOk = e => {
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            look:false,
            tableData:''
        };
    }
    // 查询所有的商家的信息
    componentDidMount() {
        this.mounted =true
        axios({
            url:SEARCH_MERCHANT,
            method:'get',
            params:{}
        }).then(data=>{
            if (this.mounted){
                this.setState({
                    tableData:data.data.data
                })
            }

            console.log(data)
        })
    }
    componentWillUnmount() {
        this.mounted=false
    }

    // 点击查询的按钮
    search=()=>{
        axios({
            // url:
        })
        console.log('这是查询的按钮')
    }
    // 点击重置的按钮
    reset=()=>{
        console.log('这是重置的按钮')
    }
    // 点击审核的按钮
    check=()=>{
        this.setState({
            visible: true,
        });
        console.log('这是审核的按钮')
    }
    // 点击同意的按钮
    agree=()=>{
        console.log('这是同意的按钮')
    }
    // 点击驳回的按钮
    rejected=()=>{
        this.setState({
            look:true,
        })
        console.log('这是驳回的按钮')
    }
    // 点击禁用的按钮：禁止登陆
    disableBtn=()=>{
        console.log('这是禁用的按钮')
    }
    // 点击确认的按钮
    modalOk=()=>{
        console.log('这是点击确认的按钮')
    }
    // 点击取消的按钮
    modalCancle=()=>{
        this.setState({
            visible: false,
        });
        console.log('这是取消的按钮')
    }
    // 点击确认驳回的按钮
    confirm=(e)=> {
        console.log(e);
        message.success('你已成功驳回了此商家的注册信息');
    }
    // 点击取消驳回的按钮
    cancel=(e)=> {
        console.log(e);
        message.error('驳回失败！你已取消！');
    }
    render() {
        const columns = [
            {
                title: '店铺名称',
                dataIndex: 'merchanr_name',
                key: 'merchanr_name',
                align: 'center',
            },
            {
                title: '注册人姓名',
                dataIndex: 'user_name',
                key: 'user_name',
                align: 'center',
            },
            {
                title: '手机号',
                dataIndex: 'user_iphone',
                key: 'user_iphone',
                align: 'center',
            },
            {
                title: '商家所在地',
                dataIndex: 'merchant_site',
                key: 'merchant_site',
                align: 'center',
            },
            {
                title: '注册时间',
                dataIndex: 'merchant_join_date',
                key: 'merchant_join_date',
                align: 'center',
            },
            {
                title: '运营状态',
                key: 'merchant_status_name',
                dataIndex: 'merchant_status_name',
                align: 'center',
            },
            {
                title: '操作',
                dataIndex:'operate',
                key:'operate',
                align: 'center',
                render: () => (
                    <Space size="middle">
                        <Button onClick={this.disableBtn}  type="danger" icon={<WarningOutlined /> }>禁用</Button>
                    </Space>
                ),
            },
        ];
        return (
            <div>
                <div className='moreBtn'>
                    <Input placeholder="请输入要查询的商家电话或名称" onChane={this.inputContent} value={this.state.inputData}/>
                    <Button className='mybtn' type="danger"  onClick={this.search} icon={<SearchOutlined />}>
                        查询
                    </Button>
                    <Button className='mybtn1' type="primary" onClick={this.reset} icon={<ReloadOutlined />}  >
                        重置
                    </Button>
                    <Button className='mycheck' type="warning" onClick={this.check} icon={<VerifiedOutlined />}  >
                        审核
                    </Button>
                </div>
                <Table pagination={pageNum} columns={columns} dataSource={this.state.tableData} rowKey={(record)=>`complete${record.merchant_id}`} />
                <Modal
                    title="审核商家注册信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <div className='modalFooter'>
                            <Button key='confirm' className='modalBtn' icon={<CheckCircleOutlined />} onClick={this.modalOk} > 确认</Button>,
                            <Button key='cancel' className='modalBtn1' icon={<CloseCircleOutlined />} onClick={this.modalCancle}>取消</Button>
                        </div>

                    ]}
                >
                    <Form className='checkForm'
                        {...layout}
                        name="审核商家"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="店铺名称"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="注册人姓名"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item className='idCard'
                                   label="身份证号"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="手机号"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item className='address'
                                   label="商家所在地"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item className='date'
                                   label="注册时间"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <div className='checkBtn'>
                                <Button className='agreeBtn' size='small' type="primary" onClick={this.agree}>
                                    同意
                                </Button>
                                <Button type="primary" size='small' className='agreeBtn1' onClick={this.rejected}>
                                    驳回
                                </Button>
                            </div>
                        </Form.Item>
                        <Popconfirm
                            title="确定驳回此商家注册吗？"
                            placement="right"
                            visible={this.state.look}
                            onConfirm={this.confirm}
                            onCancel={this.cancel}
                            okText="确认"
                            cancelText="取消"
                        >
                            <a href="#">Delete</a>
                        </Popconfirm>,
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default Shangjiaguanli